<template>
    <el-dialog :visible="visible" @close="$emit('close',false)" title="History Order" width="80%">
        <el-table
                :data="poList.slice((pageNum-1)*10,pageNum*10)"
                border
                stripe
                style="width: 100%">
            <el-table-column
                    type="index"
                    label="No"
                    width="100"
            >
            </el-table-column>

            <el-table-column
                    prop="purchaseNo"
                    label="Purchase Number"
                    width="150"
            >

            </el-table-column>

            <el-table-column
                    prop="requestNo"
                    label="Request Number"
                    width="150">
            </el-table-column>

            <el-table-column
                    prop="supplierName"
                    label="Vendor Name"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="requestDate"
                    label="Request Date"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="requestBy"
                    label="Request By"
            >
            </el-table-column>
            <el-table-column label="Opr">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="emitDetail(scope.row)">Request
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="page">
            <el-pagination background
                           @current-change="changePage"
                           layout="prev, pager, next"
                           :total="total"></el-pagination>
        </div>
    </el-dialog>
</template>

<script>
    import {ERROR_OK} from "../../util/config";
    import {getPoHistory} from "../../api/purchase";

    export default {
        data(){
            return {
                poList:[],
                total:0,
                pageNum:1
            }
        },
        props:{
            supplierId:{
                type:Number,
                default:null
            },
            visible:{
                type:Boolean,
                default:false
            }
        },
        methods:{
            changePage(page){
                this.pageNum = page
            },
            emitDetail(r){
                this.$emit('detail',r)
            },
            async _getPoHistory(id){
                let {status,data} = await getPoHistory(id);
                if(status === ERROR_OK) {
                    this.poList = data;
                    this.total = data.length
                }
            }
        },
        watch:{
            supplierId(id){
                this._getPoHistory(id)
            }
        }
    }
</script>

<style scoped>

</style>